<template>
  <div :class="['table', options.class]">
    <el-table :data="tableData" style="width: 100%" scrollbar-always-on height="330">
      <!-- 设置 table 表格的最左侧的选择栏 -->
      <el-table-column
        v-if="options?.Checkbox"
        type="selection"
        :width="options?.CheckboxWidth"
        :fixed="options?.CheckboxFixed ? 'left' : ''"
      />

      <el-table-column v-for="item in options.column" :prop="item.prop" :label="item.label" />
    </el-table>
  </div>

  <el-pagination
    class="custom-Pages"
    prev-text="上一页"
    next-text="下一页"
    layout="total, prev, pager, next, jumper,slot"
    v-model:current-page="currentPage3"
    :small="small"
    :disabled="disabled"
    :background="background"
    :total="1298"
    pager-count="4"
  >
    <button class="sure-but">确定</button>
  </el-pagination>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
const currentPage3 = ref(1);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const props = defineProps({
  // 定义表头数据
  options: Object,
  // 定义表格数据
  tableData: {
    type: Array,
    default: () => []
  }
});

// 通过子组件去触发父组件中的方法
const emits = defineEmits(["rowDel", "rowEdit"]);

// 点击编辑表格数据的方法
const handleEdit = (type: number, item: object) => {
  emits("rowEdit", type, item);
};

// 点击删除表格数据的方法
const handleDelete = (index: number, item: object) => {
  emits("rowDel", index, item);
};

onMounted(() => {
  (document.querySelector(".el-pagination__goto") as HTMLElement).innerHTML = "到第";
});
</script>
<style scoped lang="less">
:deep(.cell) {
  padding: 0;
  height: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.student-achievements-table-box {
  margin-top: 20px;

  :deep(th > .cell) {
    color: #5affff;
  }
}

// 设置表格行高度
:deep(.el-table__body tr),
:deep(.el-table__body td) {
  padding: 0;
  height: 30px;
}

// 表格内背景颜色
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  padding: 0;
  // border: 0px;
  color: #ffffff; // 修改字体颜色
  text-align: center;
  font-size: 12px;
  height: 30px;
  background-color: transparent !important;
}

//去除底部边框线
:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell) {
  border-bottom: none;
}

:deep(.el-table__inner-wrapper::before) {
  display: none;
}

/*最外层透明*/
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: transparent !important;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
}

// 表格最外边框
:deep(.el-table::before) {
  /* 去除下边框 */
  height: 0;
}

// 表格最外边线

.el-table::before {
  height: 0px;
}

.el-table--border::after {
  width: 0px;
}

.el-table--border {
  border: none;
}

:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: 0;
}

:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
  background-color: transparent !important;
}

:deep(.el-table td.el-table__cell div.cell) {
  background-color: transparent !important;
}

:deep(.el-table) {
  background-color: transparent !important;
}

:deep(.el-table__row) {
  background-color: transparent !important;
}

:deep(.el-table__body .el-table__row:nth-child(even)) {
  opacity: 0.1;
}

.el-pagination {
  margin-right: 20px;
  float: right;
  font-size: 14px;
}

.operate-box {
  display: flex;
  justify-content: space-between;

  .operate {
    background-image: url(../../assets/images-situation-k/运营管理-会议室列表-查看按钮-未选中.png);
    background-size: 40px 18px;
    width: 40px;
    line-height: 18px;
    text-align: center;
  }
}

:deep(.el-pagination__total) {
  color: #ffffff !important;
}

// .el-pager li.is-active
:deep(.el-pager li.is-active) {
  font-weight: 500;
}

.custom-Pages {
  margin-top: -2px;

  :deep(.el-pagination__goto) {
    color: #ffffff;
  }

  :deep(.btn-prev) {
    background-color: transparent !important;
    color: #ffffff !important;
  }

  :deep(.btn-next) {
    background-color: transparent !important;
    color: #ffffff !important;
  }

  :deep(.el-pager li:last-child) {
    display: none;
  }

  :deep(.el-pager) {
    li {
      min-width: 12px;
      background-color: transparent !important;
      color: #ffffff;
    }

    .is-active {
      width: 16px;
      height: 20px;
      color: #5affff !important;
      border: 1px solid #5affff;
    }
  }

  :deep(.el-pagination__editor.el-input) {
    width: 36px;
  }

  :deep(.el-input) {
    color: #ffffff !important;
  }

  :deep(.el-pagination__classifier) {
    color: #ffffff;
  }

  :deep(.el-input__wrapper) {
    border: none;
    background: none;
    border-radius: 0;
    padding: 0;

    .el-input__inner {
      border: none;
      color: #ffffff;
      width: 32px;
      height: 20px;
    }
  }
}

.sure-but {
  width: 38px;
  height: 20px;
  background: rgba(90, 255, 255, 0.2);
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  border: 1px solid #5affff;
  color: #ffffff;
  margin-left: 10px;
}
</style>
